<script setup lang="ts">
import communityImg from './img/community.jpg'
import competitionImg from './img/competition.jpg'
import moreImg from './img/more.jpg'
import rankingImg from './img/ranking.jpg'
</script>
<template>
  <div class="setting">
    <img :src="communityImg" alt="社区"/>
    <img :src="competitionImg" alt="赛事"/>
    <img :src="moreImg" alt="更多"/>
    <img :src="rankingImg" alt="排行"/>
  </div>
</template>
<style scoped lang="scss">
.setting {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 2em;
  top: 4em;

  img {
    height: 3em;
    border-radius: 50%;
  }

  > * + * {
    margin-top: 0.6em;
  }
}
</style>